import React, { useEffect, useState } from 'react'
import PubHeader from '../../components/PubHeader'
import CurrentCity from './CurrentCity'
import CityList from './CityList'
import { useDispatch, useSelector } from 'react-redux'
import { changeCity } from '../../redux/actions/city'
function Index() {
  // const [city, setcity] = useState('北京')
  const dispatch = useDispatch();
  const city = useSelector(state => state.city);
  const onCItyEvent = (city) => {
    dispatch(changeCity(city))
  }
  const [height, setheight] = useState(0)
  useEffect(() => {
    const h=document.getElementById('common-header').offsetHeight+document.querySelector('.current_city').offsetHeight
    setheight(h)
  }, [])
  return (
    <div className='citylayout' style={{ height: window.innerHeight }}>
      <PubHeader title={'城市选择'}></PubHeader>
      <CurrentCity city={city.cityName} ></CurrentCity>
      <CityList onEvent={onCItyEvent} height={height}></CityList>
    </div>
  )
}
export default Index
